<template>
	<view class="content">
		<header>
			<div class="userInfo">
				<div class="img">
					<image src="../../static/image/banner1_1.jpg" mode=""></image>
				</div>
				<ul>
					<li class="userName">{{status.username}}</li>
					<li class='job'>{{status.company}}</li>
				</ul>
				<div class='btn' v-if="status">
					<u-button size="medium" @click='signOut'>退出</u-button>
				</div>
			</div>
		</header>
		<u-cell-group>
			<u-cell-item @click="upPasswordClick" icon="lock" title="修改密码"></u-cell-item>
		</u-cell-group>
		<u-popup @close='closePopup' v-model="upPassword" mode="bottom">
			<u-cell-group>
				<u-field
					:password="true"
					v-model="password"
					label="密码"
					placeholder="请填写密码"
				>
				</u-field>
				<u-field
					:password="true"
					@input="inputPassword"
					v-model="newPassword"
					label="新密码"
					placeholder="请填写密码"
				>
				</u-field>
				<u-field
					:password="true"
					@input="confirmPassword"
					v-model="oldPassword"
					label="确认密码"
					placeholder="请填写密码"
					:error-message="errorMessage"
				>
				</u-field>
			</u-cell-group>
			<div class="button">
				<u-button :loading='loading' size="medium" @click="changePassword">确定</u-button>
			</div>
		</u-popup>
		<!--提示-->
		<u-toast ref="uToast" />
		<u-modal :show-cancel-button='true' @confirm='confirmClick' v-model="show" content="确定登出当前账号？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				show:false,
				status:null,
				upPassword:false,
				password:null,
				newPassword:null,
				oldPassword:null,
				errorMessage:null
			};
		},
		onShow(){
			try {
			    const value = uni.getStorageSync('userStatus');
			    if (!value) {
			        uni.navigateTo({
			            url: "/pages/my/login"
			        });
			    }else{
					this.status = value
				}
			} catch (e) {
			    // error
				console.log('错误',e)
			}
		},
		methods:{
			closePopup(){
				this.password = null,
				this.newPassword = null,
				this.oldPassword = null
			},
			//输入新密码
			inputPassword(e){
				if(e!=this.oldPassword){
					this.errorMessage='密码不一致'
				}else{
					this.errorMessage=''
				}
			},
			//确认密码
			confirmPassword(e){
				if(e!=this.newPassword){
					this.errorMessage='密码不一致'
				}else{
					this.errorMessage=''
				}
			},
			//修改密码
			upPasswordClick(){
				this.upPassword=true
			},
			changePassword(){
				if(!this.password){
					this.$refs.uToast.show({
						title: '密码不能为空',
						type: 'warning'
					})
				}else if(!this.newPassword){
					this.$refs.uToast.show({
						title: '新密码不能为空',
						type: 'warning'
					})
				}else if(!this.oldPassword){
					this.$refs.uToast.show({
						title: '请确认密码',
						type: 'warning'
					})
				}else if(this.errorMessage){
					this.$refs.uToast.show({
						title: '两次输入密码不一致',
						type: 'warning'
					})
				}else{
					//console.log(`确定修改Password:${this.password},newpassword:${this.newPassword},oldpassword:${this.oldPassword}`)
					this.loading = true
					uni.request({
					    url: this.$api.updatePassword, 
					    data: {
					        oldPassword:this.password,
							newPassword:this.newPassword,
							userId:this.status.id
					    },
					    success: (res) => {
							this.loading = false
					        console.log(res);
							if(res.data.status === '500'){
								this.$refs.uToast.show({
									title: res.data.message,
									type: 'error'
								})
							}else{
								this.$refs.uToast.show({
									title: '密码修改成功,请重新登录',
									type: 'succes'
								})
								uni.redirectTo({
								    url: "/pages/my/login"
								});
							}
					        
					    },fail: (err) => {
					    	this.loading = false
							this.$refs.uToast.show({
								title: '密码修改失败',
								type: 'error'
							})
							console.log('修改失败',err)
					    }
					});
				}
			},
			//点击退出按钮
			signOut(){
				this.show = true
			},
			//确定退出
			confirmClick(){
				uni.removeStorage({
				    key: 'userStatus',
				    success:(res)=>{
				        console.log('success----------',res);
						this.$refs.uToast.show({
							title: '退出成功',
							type: 'succes'
						})
						uni.redirectTo({
						    url: "/pages/my/login"
						});
				    },
					fail:(err)=> {
				    	console.log('err',err)
						this.$refs.uToast.show({
							title: '退出失败',
							type: 'error'
						})
				    }
				});
			}
		}
	}
</script>

<style lang="less">
	.content{
		.button{
			text-align: center;
			margin: 30rpx auto;
		}
		header{
			padding: 80rpx 0;
			background-color: #2B85E4;
			.userInfo{
				width: 90%;
				margin: 0 auto;
				display: flex;
				image{
					width: 120rpx;
					height: 120rpx;
					overflow: hidden;
					border-radius: 50%;
				}
				ul{
					padding-top: 10rpx;
					margin-left: 30rpx;
					li{
						line-height: 50rpx;
						font-size: 14px;
						color: #fff;
					}
				}
			}
		}
		.btn{
			text-align: center;
			margin: 20rpx auto;
		}
	}
</style>
